<template>
    <div>
        <div class="conpdsmall" v-if="tableLoading">
            <div v-for="pg in pagination.PageSize" v-if="pagination">
                <van-skeleton :row="3" style="padding: 0; margin-bottom: 10px;" />
            </div>
            <van-loading size="24px" vertical>加载中...</van-loading>
        </div>
        <template v-else>
            <table v-if="dataSource.length > 0">
                <van-cell style="padding: 5px 15px;" v-for="(data,hdindex) in dataSource" :key="hdindex">
                    <shaifencard :columns="columns" :item="data"></shaifencard>
                </van-cell>
            </table>
            <template v-else>
                <div class="loadbox">暂无数据</div>
            </template>

            <van-row gutter="5" class="conpdsmall" v-if="dataSource.length > 0 && pagination">
                <van-col span="16">
                    <van-pagination
                            v-model="pagination.current"
                            :total-items="pagination.total"
                            :items-per-page="pagination.PageSize"
                            @change="paginationchange"
                            mode="simple"
                    />
                </van-col>
                <van-col span="8" class="flexnowrap flexalignstretch">
                    <van-field style="padding: 7px 5px; border: 1px solid #eee;"
                               maxlength="6" placeholder="页数"
                               v-model="pageval"
                    />
                    <van-button type="info" size="small" style="height: auto; min-width: auto;padding: 0px 10px;white-space: nowrap" @click="pagejump">跳转</van-button>
                </van-col>
            </van-row>
        </template>
    </div>
</template>

<script>
    import shaifencard from '@/components/card/zwcard';
    export default {
        props:{
            select:{ type: Boolean, default: false },
            tableLoading:{ type: Boolean, default: false },
            pagination: { type: Object, default: () => {}, },
            columns: { type: Array, default: () => [], },
            dataSource: { type: Array, default: () => [], },
        },
        name: "shaifentable",
        data () {
            return {
                pageval: '',
            }
        },
        computed:{
        },
        created () {
        },
        methods: {
            pagejump(){
                var that = this
                const value = Number(that.pageval);
                const reg = /^[1-9]\d*$/;
                if (!reg.test(value)) {that.pageval = '';return}
                var pagetotal = Math.ceil(that.pagination.total / that.pagination.PageSize)
                if (value > pagetotal) that.pageval = pagetotal
                that.paginationchange(Number(that.pageval))
                that.pageval = ''
            },
            paginationchange(page){
                this.pagination.onChange(page)
            },
        },
        components:{
            shaifencard
        },
    };
</script>

<style scoped>

</style>